$postSignature: (
    primary: var(--themeColor),
    background: var(--color-basic-100),
    borderRadius: 2px,
);

$toolMenu: (
    background: var(--color-basic-50),
);

$footer: (
    background: var(--color-basic-700),
);

// $linemubers: (
//     color: var(--themeColor),
// );

$player: (
    bodyBackground: var(--main-bg),
);

$postMeaage: (
    categoriesBackground: #ff6b6b,
    tagsBackground: #ff6b6b #fbc531 #22a6b3 #10ac84 #0097e6,
);

$signature: (
    padding: 1rem 14px,
    fontSize: 1em,
);

$emoji: (
    textEmojiColor: var(--color-basic-800),
    bg: var(--emoji-bg),
    borderColor: var(--color-basic-300),
    hoverBg: var(--color-basic-100),
    hoverBorderColor: var(--color-basic-200),
);

@import 'plugins/footer/index.scss';
// @import 'plugins/copyCode/index.scss';
@import 'plugins/linenumbers/index.scss';
// @import 'plugins/postSignature/index.scss';
@import 'plugins/commentsAvatars/index.scss';
@import 'plugins/toolMenu/index.scss';
@import 'plugins/mode/index.scss';
@import 'plugins/highlight/index.scss';
@import 'plugins/imagebox/index.scss';
@import 'plugins/emoji/index.scss';

.custom-toolbar {
    .toolbar-item i::before {
        font-weight: 700;
    }
}

#catalog {
    position: sticky;
    top: 6em;
    margin: 0 8px;
    width: 260px;
    height: max-content;
    max-height: 80vh;
    overflow: auto;
    .catalog-title {
        font-size: 130%;
    }
    li {
        font-size: 0.85em;
        cursor: pointer;
        color: var(--color-basic-600);
        display: block;
        margin-left: 0.75em;
        margin-top: 0.8em;
        padding-right: 10px;
        &:hover {
            color: var(--themeColor);
        }
        &::before {
            content: ' ';
            border-radius: 100%;
            width: 5px;
            height: 5px;
            display: inline-block;
            border: 1px solid var(--color-basic-600);
            margin-right: 6px;
        }
        &.catalog-active {
            color: var(--themeColor);
            font-weight: bold;
            &::before {
                content: ' ';
                border-radius: 100%;
                width: 5px;
                height: 5px;
                display: inline-block;
                border: 1px solid var(--themeColor);
                margin-right: 6px;
                background-color: var(--themeColor);
            }
        }
    }
    .h2-list ~ .h3-list {
        margin-left: 3em;
    }
    .h3-list ~ .h4-list {
        margin-left: 4em;
    }
    .h4-list ~ .h5-list {
        margin-left: 5em;
    }
    .h5-list ~ .h6-list {
        margin-left: 6em;
    }
}

#post-signature {
    width: 99%;
    padding: 12px 20px;
    background-color: var(--color-basic-50);
    border: 2px solid var(--themeColor);
    box-shadow: 2px 2px 0 var(--themeColor);
    font-size: 13px;
    border-radius: 2px;
}

// copy code
.cnblogs_code,
.cnblogs_Highlighter {
    position: relative;
    .copy-btns {
        z-index: 1;
    }
}

.copy-btns {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 86px;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px 1px 8px;
    border-radius: 4px;
    color: var(--color-basic-600);
    &:before {
        content: '\f0c5';
        margin-right: 8px;
        font-weight: 500;
    }
    &:hover {
        background: var(--color-basic-300);
        transition: background 0.2s;
    }
}

// code language
.awes-lang {
    position: absolute;
    right: 98px;
    top: 13px;
    height: 14px;
    line-height: 1.2;
    padding-right: 14px;
    margin-right: 4px;
    border-right: 1px solid var(--color-basic-300);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-copy-btn);
}
